<template>
	<div class="Box">
		<header>
			<div class="top">
				<img :src="require('../assets/Me/headimg.jpg')" alt="" />
				<div class="message">
					<h3>客户名称</h3>
					<p class="grade">等级:</p>
					<p class="coin">代返金额:</p>
				</div>
			</div>
		</header>

		<!-- 订单 -->
		<div class="orderBox">
			<div class="order">
				<img :src="require('../assets/Me/m1.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>全部订单</p>
				<span>></span>
			</div>
			<!-- TODO:加跳转 -->
			<ul class="nav">
				<li>
					<!-- <img src="" alt="" /> -->

					<img
						:src="require('../assets/Me/center-icon-order-dfk.png')"
						alt=""
					/>
					<router-link to="/home" tag="p">代付款</router-link>
				</li>
				<li>
					<img
						:src="require('../assets/Me/center-icon-order-dfh.png')"
						alt=""
					/>
					<router-link to="/fenlei" tag="p">代发货</router-link>
				</li>
				<li>
					<img
						:src="require('../assets/Me/center-icon-order-dsh.png')"
						alt=""
					/>
					<router-link to="/shop" tag="p">代收货</router-link>
				</li>
				<li>
					<img
						:src="require('../assets/Me/center-icon-order-dpj.png')"
						alt=""
					/>
					<router-link to="/me" tag="p">代评价</router-link>
				</li>
			</ul>
		</div>
		<!-- 小金库 -->
		<div class="vaultBox">
			<!--  -->
			<router-link class="vault" to="/xjk" tag="div">
				<img :src="require('../assets/Me/m4.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>我的小金库</p>
				<span>></span>
			</router-link>
			<!-- TODO:加跳转 -->
			<ul class="nav">
				<li>
					<div class="imgg">代取数据</div>
					<router-link to="/home" tag="p">账户总额</router-link>
				</li>
				<li>
					<div class="imgg">代取数据</div>
					<router-link to="/fenlei" tag="p">返现金额</router-link>
				</li>
				<li>
					<div class="imgg">代取数据</div>
					<router-link to="/shop" tag="p">代返现</router-link>
				</li>
				<li>
					<div class="imgg">代取数据</div>
					<router-link to="/me" tag="p">我的积分</router-link>
				</li>
			</ul>
		</div>

		<!-- 应用列表 -->
		<ul class="uselist">
			<li class="list">
				<img :src="require('../assets/Me/m5.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>交易记录</p>
				<span>></span>
			</li>

			<li class="list">
				<img :src="require('../assets/Me/m7.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>我的收藏</p>
				<span>></span>
			</li>
			<li class="list">
				<img :src="require('../assets/Me/m3.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>地址管理</p>
				<span>></span>
			</li>
			<li class="list">
				<img :src="require('../assets/Me/m8.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>我的银行卡</p>
				<span>></span>
			</li>
			<li class="list">
				<img :src="require('../assets/Me/m2.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>密码修改</p>
				<span>></span>
			</li>
			<li class="list" @click="GoLogin">
				<img :src="require('../assets/Me/m6.png')" alt="" />
				<!-- TODO: 跳转页面 -->
				<p>退出账号</p>
				<span>></span>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	methods: {
		// 登录页面跳转
		GoLogin() {
			console.log(1111)
			this.$router.push('/login/l')
		},
	},
}
</script>

<style lang='scss'>
* {
	margin: 0;
	padding: 0;
	list-style: none;
}
// 最大盒子
.Box {
	width: 100%;
	//我的信息
	header {
		width: 100%;
		height: 112px;
		background: url('../assets/Me/Top.jpg') no-repeat;
		.top {
			width: 345px;
			height: 84px;
			margin: 0 auto;
			padding-top: 15px;
			display: flex;
			img {
				width: 82px;
				height: 82px;
				border-radius: 50%;
			}
			.message {
				width: 100%;
				height: 85px;
				margin-left: 10px;
				h3 {
					height: 25px;
					color: white;
					font-size: 16px;
				}
				// 等级grade
				.grade {
					margin-top: 5px;
					font-size: 13px;
					color: #fc0;
					margin-top: 10px;
				}
				// 代返金
				.coin {
					font-size: 13px;
					color: #fafafa;
					margin-top: 10px;
				}
			}
		}
	}
	//订单order
	.orderBox {
		width: 100%;
		height: 140px;
		.order {
			margin: 0 auto;
			width: 89.4%;
			height: 20px;
			padding: 20px;
			margin-top: 10px;
			border-bottom: 1px solid #ccc;
			img {
				width: 20px;
				height: 20px;
			}
			p {
				display: inline-block;
				width: 240px;
				height: 100%;
				font-size: 14px;
				color: #333;
				margin-top: -5;
				margin-left: 20px;
			}
			span {
				margin-left: 30px;
				font-size: 22px;
				color: #c8c8cd;
			}
		}
		.nav {
			width: 100%;
			height: 68px;
			margin-top: 5px;
			display: flex;
			text-align: center;
			li {
				padding-top: 5px;
				width: 93px;
				height: 100%;
				img {
					width: 25px;
					height: 24px;
					margin-top: 10px;
				}
				p {
					font-size: 12px;
					color: #666;
					margin-top: 3px;
				}
			}
		}
	}
	// 金库
	.vaultBox {
		width: 100%;
		height: 140px;
		display: block;
		.vault {
			margin: 0 auto;
			width: 89.4%;
			height: 20px;
			padding: 20px;
			margin-top: 10px;
			border-bottom: 1px solid #ccc;
			img {
				width: 20px;
				height: 20px;
			}
			p {
				display: inline-block;
				width: 240px;
				height: 100%;
				font-size: 14px;
				color: #333;
				margin-top: -5px;
				margin-left: 20px;
			}
			span {
				margin-left: 30px;
				font-size: 22px;
				color: #c8c8cd;
			}
		}
		.nav {
			width: 100%;
			height: 68px;
			margin-top: 5px;
			display: flex;
			text-align: center;
			li {
				padding-top: 5px;
				width: 93px;
				height: 100%;
				.imgg {
					width: 60px;
					height: 24px;
					font-size: 15px;
					color: #000;
					margin: 0 auto;
					margin-top: 10px;
				}
				p {
					font-size: 12px;
					color: #666;
					margin-top: 3px;
				}
			}
		}
	}
	// 应用列表 uselist
	.uselist {
		width: 100%;
		height: 300px;
		margin-top: 20px;
		.list {
			margin: 0 auto;
			width: 89.4%;
			height: 20px;
			padding: 8px;
			border-bottom: 1px solid #ccc;
			img {
				width: 20px;
				height: 20px;
			}
			p {
				display: inline-block;
				width: 240px;
				height: 100%;
				font-size: 14px;
				color: #333;
				margin-top: -5;
				margin-left: 20px;
			}
			span {
				margin-left: 30px;
				font-size: 22px;
				color: #c8c8cd;
			}
		}
	}
}
</style>